<template>
    <div>
        <el-upload
            action=""
            :http-request="handleOssUpload"
            :multiple="true"
            :list-type="listType"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :on-remove="handleRemove"
            :on-preview="handlePreview"
            :limit="maxCount"
            :on-exceed="handleExceed"
            :show-file-list="showFile"
        >
            <i class="el-icon-plus" v-if="listType === 'picture-card'"></i>

            <el-button size="small" type="primary" v-else>点击上传</el-button>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" :modal="false">
            <img width="100%" :src="dialogImageUrl" alt/>
        </el-dialog>
    </div>
</template>
<script>
import { getUUID } from "@/libs";
import { Aliyun } from '@/config'
var OSS = require('ali-oss');

export default {
    name: "MultipartUpload",
    props: {
        //图片属性数组
        value: Array,
        //最大上传图片数量
        maxCount: {
            type: Number,
            default: 30
        },
        listType: {
            type: String,
            default: "picture-card"
        },
        showFile: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            dialogVisible: false,
            dialogImageUrl: null,
            clinet: null,
            progress: 0
        };
    },

    computed: {
        fileList() {
            let fileList = [];
            if(this.value) {
                fileList = this.value
            }
            return fileList;
        }
    },

    mounted() {
        this.$nextTick(function() {
            // 初始化阿里云OSS
            this.clinet = new OSS(Aliyun.oss);
        });
    },

    methods: {
        emitInput(fileList) {
            this.$emit("input", fileList);
        },
        handleRemove(file, fileList) {
            this.emitInput(fileList);
        },
        handlePreview(file) {
            this.dialogVisible = true;
            this.dialogImageUrl = file.url;
        },
        beforeUpload(file) {
            let _self = this;
        },
        handleExceed(files, fileList) {
            this.$message({
                message: "最多只能上传" + this.maxCount + "张图片",
                type: "warning",
                duration: 1000
            });
        },

        handleOssUpload(option) {
            const _this = this
            try {
                this.clinet.multipartUpload(getUUID(), option.file, {
                    progress(p, checkpoint) {
                        _this.progress = p
                    }
                }).then(result => {
                    const name = result.name
                    const url = result.res.requestUrls[0].split('?')[0]

                    this.fileList.push({ name, url });

                    this.emitInput(this.fileList);
                })
            } catch(err) {
                console.log(err);
            }
        }
    }
};
</script>
<style></style>
